import React from "react";
import { connect } from "react-redux";
import { Row, Col, Form, Icon, Input, Button, message } from "antd";
import { SignIn } from "../../api/UserApi";
class Login extends React.PureComponent {
  state = {
    loading: false
  };
  /**
   * 登录操作
   */
  // 定义一个方法
  handleSubmit = e => {
    // 阻止默认时间
    e.preventDefault();
    // this.props上 解构拿出来
    const { hanldeLogin, form, location, history } = this.props;

    // 主动触发表单校验
    form.validateFields((err, values) => {
      if (!err) {
        // console.log(values);
        SignIn(values).then(response => {
          const { data } = response;
          if (data.code === 0) {
            // 此时data是username password
            hanldeLogin(data.data);

            message.success("登录成功", 0.5, () => {
              let redirect = location.state ? location.state.redirect : "/";
              //去之前想去的页面
              history.replace(redirect);
            });
          } else {
            message.error(data.msg);
            this.setState({
              loading: false
            });
          }
        });
      }
    });
  };

  render() {
    // form上取出 getFileDecorator 用于和表单进行双向绑定
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.state;
    // 渲染时 获取state的loading
    return (
      <div className="page-login">
        <Row className="page-login__row" type="flex" align="middle">
          <Col span={8} offset={8}>
            {/* 表单绑定 submit事件 */}
            <Form onSubmit={this.handleSubmit} className="page-login__form">
              <Form.Item>
                {getFieldDecorator("username", {
                  rules: [
                    { required: true, message: "Please input your username!" },
                    { type: "email", message: "请输入正确的邮箱！" }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    placeholder="Username"
                  />
                )}
              </Form.Item>

              <Form.Item>
                {getFieldDecorator("password", {
                  rules: [
                    { required: true, message: "Please input your password!" },
                    { min: 6, message: "最少6位！" },
                    { max: 12, message: "最多12位！" }
                  ]
                })(
                  <Input
                    prefix={
                      <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                    }
                    type="password"
                    placeholder="Password"
                  />
                )}
              </Form.Item>
              {/* htmlType	设置 button 原生的 type 值
              submit 表单数据提交
              reset 所有控件重置
              button 按下时不执行任何操作
*/}
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="page-login__form-button"
                  loading={loading}
                >
                  登 录
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  className="page-login__form-button"
                  onClick={() => {
                    this.props.history.push("/register");
                  }}
                >
                  去注册
                </Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </div>
    );
  }
}

export default connect(null, dispatch => {
  return {
    hanldeLogin(user) {
      dispatch({
        type: "LOGIN",
        user
      });
    }
  };
})(Form.create()(Login));
